<!DOCTYPE html>
<title>box-sizing: border-box all elements sized with percentages</title>
<link rel="author" title="Justin Hill" href="http://www.justin-hill.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing">
<link rel="match" href="ref/box-sizing-border-box-001-ref.html">
<meta name="assert" content="Test checks that border-sizing:border-box makes element's width distance from left border edge to right border edge when the container's width is specified in percentage.">
<style>
    .container {
      width:50%;
      background: red;

    }
    .child {
      box-sizing:border-box;
      color:white;
      width:50%;
      background:green;
      border: 10px black solid;
      float: left;
      text-align: center;
    }
</style>
<body>
  <p> Test passes if green boxes are side by side with no red visible.</p>
  <div class="container">
    <div class="child">
      <p>left</p>
    </div>
    <div class="child">
      <p>right</p>
    </div>
  </div>
</body>